import {Theme} from './page.js';
import {JSXAttributes, useElement} from './core/element.js';

const name = 's-switch';
const props = {
    disable: false,
    checked: false
};

const style = () => `
:host {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    cursor: pointer;
    position: relative;
    color: var(--s-color-primary, ${Theme.colorPrimary});
    width: 52px;
    aspect-ratio: 1.625;
    -webkit-aspect-ratio: 1.625;
    border-radius: 26px;
    flex-shrink: 0;
}

:host([disable=true]) {
    pointer-events: none;
}

.track {
    width: 100%;
    height: 100%;
    border: solid 2px var(--s-color-outline, ${Theme.colorOutline});
    background: var(--s-color-surface-container-highest, ${Theme.colorSurfaceContainerHighest});
    box-sizing: border-box;
    border-radius: inherit;
}

:host([disable=true]) .track {
    background: none;
    border-color: color-mix(in srgb, var(--s-color-on-surface, ${Theme.colorOnSurface}) 12%, transparent) !important;
}

:host([checked=true]) .track {
    border-width: 0;
    background: currentColor;
}

:host([disable=true][checked=true]) .track {
    background: color-mix(in srgb, var(--s-color-on-surface, ${Theme.colorOnSurface}) 12%, transparent) !important;
}

.container {
    position: absolute;
    height: 125%;
    width: auto;
    aspect-ratio: 1;
    -webkit-aspect-ratio: 1;
    border-radius: 50%;
    top: auto;
    transition: transform .1s ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    color: var(--s-color-outline, ${Theme.colorOutline});
    transform: translateX(-10%);
}

:host([checked=true]) .container {
    transform: translateX(40%);
    color: currentColor;
}

.thumb {
    background: var(--s-color-outline, ${Theme.colorOutline});
    border-radius: 50%;
    width: 40%;
    height: 40%;
    transition: transform .1s, box-shadow .1s;
    transition-timing-function: ease-out;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

:host([disable=true]) .thumb {
    background: color-mix(in srgb, var(--s-color-on-surface, ${Theme.colorOnSurface}) 38%, transparent);
}

:host([checked=true]) .thumb {
    transform: scale(1.25);
    background: var(--s-color-on-primary, ${Theme.colorOnPrimary});
    box-shadow: var(--s-elevation-level1, ${Theme.elevationLevel1});
}

:host([disable=true][checked=true]) .thumb {
    background: var(--s-color-surface, ${Theme.colorSurface});
    box-shadow: none;
}

:host([checked=true]) .active > .thumb {
    transform: scale(1.5);
}

:host(:not([checked=true])) .active > .thumb {
    transform: scale(2);
}

.icon {
    width: 70%;
    height: 70%;
    fill: currentColor;
    opacity: 0;
    transition: opacity .1s ease-out;
}

:host([checked=true]) .icon {
    opacity: 1;
}

:host([checked=true][disable=true]) .icon {
    fill: color-mix(in srgb, var(--s-color-on-surface, ${Theme.colorOnSurface}) 12%, transparent);
}
`;

const template = () => `
<div class="track" part="track"></div>
<div class="container">
    <div class="thumb" part="thumb">
        <svg class="icon" viewBox="0 -960 960 960">
            <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"></path>
        </svg>
    </div>
</div>
`;

export class Switch extends useElement({
    style: style(),
    template: template(),
    props,
    syncProps: true,
    setup(shadowRoot) {
        const container = shadowRoot.querySelector('.container') as HTMLDivElement;
        this.addEventListener('mousedown', () => {
            container.classList.add('active');
            console.log('mousedown');
        });
        this.addEventListener('mouseup', () => {
            container.classList.remove('active');
            console.log('mouseup');
        });
        this.addEventListener('click', () => {
            this.checked = !this.checked;
            this.dispatchEvent(new Event('change'));
        });
    }
}) {
}

Switch.define(name);

declare global {
    namespace JSX {
        interface IntrinsicElements {
            [name]: Partial<typeof props> & JSXAttributes;
        }
    }

    interface HTMLElementTagNameMap {
        [name]: Switch;
    }
}

//@ts-ignore
declare module 'vue' {
    export interface GlobalComponents {
        [name]: typeof props;
    }
}
